<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
	<link href="__CSS__/reset.css" rel="stylesheet">
	<link href="__CSS__/mapreset.css" rel="stylesheet">
	<link rel="stylesheet" href="__JS__/plugins/elementui/element-ui/lib/theme-chalk/index.css">
	<script type="text/javascript" src="__JS__/jquery.min.js"></script>
	<script type="text/javascript" src="{$cfg.url}?v={$cfg.version}&ak={$cfg.ak}"></script>
	<title>Map</title>
	<style>
		.map-click-market{
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="allmap"></div>
	<div id="myControl" style="display: none;">
		<ul>
			<li>
				<i class="map-icon map-p1"></i>
				<span class="span-primary map-click-market" data-type="1">建档立卡贫困村（<span id="count1"></span>个）</span>
			</li>
			<li>
				<i class="map-icon map-p2"></i>
				<span class="span-success map-click-market" data-type="2">公共服务体系（<span id="count2"></span>个）</span>
			</li>
			<li>
				<i class="map-icon map-p3"></i>
				<span class="span-warning map-click-market" data-type="3">物流配送体系（<span id="count3"></span>个）</span>
			</li>
			<li>
				<i class="map-icon map-p4"></i>
				<span class="span-danger map-click-market" data-type="4">农村产品上行（<span id="count4"></span>个）</span>
			</li>
			<li>
				<i class="map-icon map-p5"></i>
				<span style="color:#6f599c" class="map-click-market" data-type="5">农村电商培训（<span id="count5"></span>个）</span>
			</li>
		</ul>
	</div>
</body>
</html>
<script type="text/javascript">
$(function() {
	mapBox.loadJS();  //异步加载地图
});
// 控件类
var ZoomControl = function() {
  	this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
  	this.defaultOffset = new BMap.Size(10, 10);
};
var mapBox = {
	map:'',
	init:function(){
		// 实例化地图
		this.map = new BMap.Map("allmap");
		this.map.enableScrollWheelZoom();
		// 浏览器定位确定地图中心
		this.getMapCenter();
		// 添加自定义控件
		this.addZoomCtrl();
		// 地图描点
		this.getPointList();
	},
	loadJS:function(){
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "{$cfg.url}?v={$cfg.version}&ak={$cfg.ak}&callback=mapBox.init";
		document.body.appendChild(script);
	},
	getPointList() {
		var param = {
			depart_id:"{$depart_id|default=''}",
			s_time:"{$s_time|default=''}",
			e_time:"{$e_time|default=''}",
			type:"{$type|default=''}"
		};
		$.post("./getPointList",param,function(res) {
			if(res.code == 1){
				for(var i=1;i<6;i++){
					var idName = "#count" + i;
					$(idName).html(res.count[i]);
				}
                mapBox.addPoint(res.data);
			}
		});
	},
	addPoint(arr) {
		for(var i=0;i<arr.length;i++){
			this.map.addOverlay(
				new BMap.Marker(new BMap.Point(arr[i].lng,arr[i].lat),
				{icon:new BMap.Icon(
					"/static/admin/images/map/p"+arr[i].type+".png",
					new BMap.Size(20,25)
                    ),
                    Animation: BMAP_ANIMATION_DROP
				}
			));
		}
	},
	addZoomCtrl() {
		// 控件类 原型继承 与 重写
		ZoomControl.prototype = new BMap.Control();
		ZoomControl.prototype.initialize = function(){
			var div = document.createElement("div");
			var oMyControl = document.getElementById('myControl');
			div.className = "ZoomControl";
			div.innerHTML = oMyControl.innerHTML;
			mapBox.map.getContainer().appendChild(div);
			return div;
		}
		var myZoomCtrl = new ZoomControl();
		this.map.addControl(myZoomCtrl);
        $('.map-click-market').click(function() {
            var type = $(this).data('type');
            if (!type) {
                return true;
            }
            mapBox.getOneTypeMarker(type);
        });
	},
	getMapCenter() {
		// var geolocation = new BMap.Geolocation();
		// geolocation.getCurrentPosition(function(r){
		// 	if(this.getStatus() == BMAP_STATUS_SUCCESS){
		// 		mapBox.map.centerAndZoom(r.point,10);
		// 	}else{
		// 		mapBox.map.centerAndZoom("昆明",7);
		// 	}
		// },{enableHighAccuracy: true});
		mapBox.map.centerAndZoom("大理",9);
	},
	getOneTypeMarker(type) {
        var param = {
            depart_id:"{$depart_id|default=''}",
            s_time:"{$s_time|default=''}",
            e_time:"{$e_time|default=''}",
            type:type
        };
        $.post("./getPointList",param,function(res) {
            if(res.code == 1){
                mapBox.map.clearOverlays();
                mapBox.addPoint(res.data);
            }
        });

	}
};
</script>
